<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Content/Master.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-1.9.0.js"></script>
<script type="text/javascript" src="Scripts/TES.CustomRadio.js"></script>
<script type="text/javascript" src="Scripts/TES.CustomCheckboxes.js"></script>
<script>
	$(document).ready(
		function() {
			RenderRadio();
			RenderCheckboxes();
		}
	);
</script>
<title>DSTV</title>
</head>

<body>

	<div class="site">
    
    	<div class="top">
        	<a href="#" id="logo"></a>
        </div>
        
        <div class="menu">
        
        	<div class="mainMenu">
            	<ul class="mainMenuItems">
                	<li class="mainMenuItem active"><a href="index.html">STANDARD DSTV BOUQUETS</a></li>
                	<li class="mainMenuItem"><a href="topup.html">TOP UP</a></li>
                	<li class="mainMenuItem"><a href="login.html">LOG IN</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            
            <div class="subMenu">
            	<ul class="subMenuItems">
                	<li class="subMenuItem active"><a href="#">Create Online Payment</a></li>
                </ul>
                <div class="clear"></div>
            </div>
            
        </div>
        
        <div class="main">
        	
            <form>
        	<div class="content">
            
            	<div class="contentColumn">
                
                	<div class="contentRow">
                    	<div class="labelField">Account Number</div>
                        <div class="fullInputField"><input type="text" name="AccountNumber" value="" /></div>
                        <div class="additionalField"></div>
                        <div class="clear"></div>
                    </div>
                    
                	<div class="contentRow">
                    	<div class="labelField">Email Address</div>
                        <div class="fullInputField"><input type="text" name="EmailAddress" value="" /></div>
                        <div class="additionalField"></div>
                        <div class="clear"></div>
                    </div>
                    
                </div>
                
                <div class="clear"></div>
                
            	<div class="contentColumn">
                
                	<div class="contentRow">
                    	<h4>Select a Primary Package</h4>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="radioField">
                        	<input type="radio" name="PrimaryPackage" />
                            <span class="radioLabel">GOtv Basic</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="radioField">
                        	<input type="radio" name="PrimaryPackage" />
                            <span class="radioLabel">GOtv Plus</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="radioField">
                        	<input type="radio" name="PrimaryPackage" />
                            <span class="radioLabel">Access</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="radioField">
                        	<input type="radio" name="PrimaryPackage" />
                            <span class="radioLabel">Compact	</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="radioField">
                        	<input type="radio" name="PrimaryPackage" />
                            <span class="radioLabel">Family</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="radioField">
                        	<input type="radio" name="PrimaryPackage" />
                            <span class="radioLabel">Premium</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="radioField">
                        	<input type="radio" name="PrimaryPackage" />
                            <span class="radioLabel">Asia South (Stand Alone)</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="radioField">
                        	<input type="radio" name="PrimaryPackage" />
                            <span class="radioLabel">Asia North (Stand Alone)</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="radioField">
                        	<input type="radio" name="PrimaryPackage" />
                            <span class="radioLabel">Portuguese (Stand Alone)</span>
                        </div>
                    </div>
                    
                </div>
            
            	<div class="contentColumn">

                	<div class="contentRow">
                    	<h4>Select Additional Packages</h4>
                    </div>

                	<div class="contentRow radioRow">
                    	<div class="checkboxField">
                        	<input type="checkbox" name="AdditionalPackages" />
                            <span class="checkboxLabel">No additional package</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="checkboxField">
                        	<input type="checkbox" name="AdditionalPackages" />
                            <span class="checkboxLabel">Dual view Add On</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="checkboxField">
                        	<input type="checkbox" name="AdditionalPackages" />
                            <span class="checkboxLabel">HDPVR Access</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="checkboxField">
                        	<input type="checkbox" name="AdditionalPackages" />
                            <span class="checkboxLabel">PVR Access</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="checkboxField">
                        	<input type="checkbox" name="AdditionalPackages" />
                            <span class="checkboxLabel">Asia Sourth (Add on)</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="checkboxField">
                        	<input type="checkbox" name="AdditionalPackages" />
                            <span class="checkboxLabel">Asia North (Add on)</span>
                        </div>
                    </div>
                    
                	<div class="contentRow radioRow">
                    	<div class="checkboxField">
                        	<input type="checkbox" name="AdditionalPackages" />
                            <span class="checkboxLabel">Portuguese (Add On)</span>
                        </div>
                    </div>
                    
                </div>
                
                <div class="clear"></div>
            
            	<div class="contentColumn">
                
                	<div class="contentRow">
                    	<div class="labelField">Number of Months</div>
                        <div class="shortInputField"><input type="text" name="AccountNumber" value="" /></div>
                        <div class="additionalField"></div>
                        <div class="clear"></div>
                    </div>
                                        
                </div>
                
                <div class="clear"></div>
                
            </div>
            
            <div class="total">
            	<div class="contentColumn">
                
                	<div class="contentRow">
                    	<div class="labelField">Total Amount</div>
                        <div class="shortInputField"><input type="text" name="AccountNumber" value="" /></div>
                        <div class="additionalField"><button class="pay" name="SubmitButton">Pay on Vpayments</button></div>
                        <div class="clear"></div>
                    </div>
                    
                </div>
            </div>
            </form>
        
        </div>
        
        <div class="footer">
        	<ul class="footerMenu">
                <li class="footerMenuItem active"><a href="#">STANDARD DSTV BOUQUETS</a></li>
                -
                <li class="footerMenuItem"><a href="#">TOP UP</a></li>
                -
                <li class="footerMenuItem"><a href="#">LOG IN</a></li>
            </ul>
            <div class="clear"></div>
          	<p class="copyrights">
        		&copy; 2013 <a href="#">DStv</a> All Rights Reserved
            </p>
        </div>
        
    </div>

</body>
</html>
